<template>
    <div class="logStateContainer">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <i class="iconfont icon-tiaochawenjuan iconF fontColor" ></i>
            <el-form-item label="报关单号" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
        </el-form>
        <div class="btnBox">
            <el-button type="primary" round @click="showTableF">查询</el-button>
            <el-button type="primary" round @click="hideTableF">清空</el-button>
        </div>
        <div class="titleBox borderBottomColor">
            <i class="iconfont icon-renwuguanli fontColor" ></i>
            <span>通关流转状态</span>
        </div>    
        <el-table
            v-if="showTable"
            :show-header="sH"
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="date"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
            >
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'LogState',
    data () {
        return {
            ruleForm: {
                name: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入报关单号', trigger: 'blur' },
                ]
            },
            showTable:false,
            sH:false,
            tableData: [{
                date: '2020-12-02',
                name: '报关状态',
                address: '结关'
            }, {
                date: '2020-12-18',
                name: '报关状态',
                address: '结关'
            }, {
                date: '2021-01-01',
                name: '报关状态',
                address: '结关'
            }]
        };
    },
    methods: {
        // 查询
        showTableF(){
            if(this.ruleForm.name === '123123'){
                this.showTable = true;
            }
            
        },
        // 清空
        hideTableF(){
            this.ruleForm.name = '';
            this.showTable = false;
        }
    },
};
</script>

<style lang="scss" scoped>
.logStateContainer{
    padding: 10px 20px;
    position: relative;
    .iconF{
        position: absolute;
        top: 15px;
        left: 20px;
    }
    .btnBox{
        text-align: center;
    }
     .el-button--small.is-round{
        padding: 10px 35px;
    }
     .el-button+.el-button{
        margin-left: 20px;
    }
    .titleBox{
        border-width: 2px;
        line-height: 30px;
        span{
            margin-left: 10px;
        }
    }
}
</style>
